<template>

  <div style="text-align: left">

    <div style="padding-bottom: 20px">
      <el-row v-if="isMine">
        <el-col :span="24">
          <course-select v-model="listQuery.params.courseId" />
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col style="text-align: right">
<!--          <el-button type="primary" icon="el-icon-plus" round @click="handleNew">新建提问</el-button>-->
        </el-col>
      </el-row>

    </div>

    <div v-for="item in dataList" :key="item.id" class="qa-box">
      <div class="avatar">
        <img v-if="item.avatar" :src="item.avatar">
        <img v-else src="@/assets/web/avatar.png">
      </div>
      <div class="content">
        <div>
          <el-row>
            <el-col :span="12" class="qa-nick">{{ item.createBy_dictText }}</el-col>
            <el-col :span="12" class="qa-time">发表于：{{ item.createTime }}</el-col>
          </el-row>
        </div>
        <div class="qa-content">
          <div v-html="$options.filters.formatRichText(item.content)"/>
        </div>

        <div v-if="item.replyList.length > 0">
          <div v-for="reply in item.replyList" :key="reply.id" class="reply-box">
            <div class="avatar">
              <img v-if="reply.avatar" :src="reply.avatar">
              <img v-else src="@/assets/web/avatar.png">
            </div>
            <div class="content">
              <div>
                <el-row>
                  <el-col :span="12" class="qa-nick">{{ reply.createBy_dictText }}</el-col>
                  <el-col :span="12" class="qa-time">回复于：{{ reply.createTime }}</el-col>
                </el-row>
              </div>
              <div class="reply-content" v-html="$options.filters.formatRichText(reply.content)"/>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div v-if="dataList.length === 0">
      <el-empty description="此课程暂无相关问答！" />
    </div>

    <div class="more-box">
      <el-link v-loading="moreLoading" v-if="!noMore" type="primary" @click="loadMore">点击此处加载更多问答...</el-link>
      <span v-if="noMore && listQuery.current > 1" class="no-more">没有更多数据了...</span>
    </div>

    <el-dialog
      :visible="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="dialogVisible = false"
    >
      <el-form ref="postForm" :model="postForm" :rules="rules" label-width="120px" label-position="left">

        <el-form-item label="提问内容" prop="content">
          <Tinymce ref="editor" v-model="postForm.content" :height="200" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>

    <el-dialog
      :visible="detailDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="detailDialog = false"
    >
      <el-form label-width="120px" label-position="left">

        <el-form-item label="提问内容" style="vertical-align: top">
          <div v-html="$options.filters.formatRichText(detailData.content)" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailDialog = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>

import Tinymce from '@/components/Tinymce'
import { saveData, fetchPaging, fetchDetail } from '@/api/course/qa'
import CourseSelect from '@/components/CourseSelect'

export default {
  name: 'CourseQa',
  components: { CourseSelect, Tinymce },
  props: {
    courseId: String,
    fileId: String,
    isMine: Boolean
  },

  data() {
    return {
      dialogVisible: false,
      dataList: [],
      noMore: false,
      listQuery: {
        current: 1,
        size: 10,
        params: {
          courseId: this.courseId,
          fileId: this.fileId,
          isMine: this.isMine
        }
      },

      postForm: {
        courseId: this.courseId,
        fileId: this.fileId
      },

      rules: {
        title: [{ required: true, message: '标题不能为空！' }],
        content: [{ required: true, message: '内容不能为空！' }]
      },

      detailDialog: false,
      detailData: {},
      moreLoading: false
    }
  },

  watch: {
    courseId: {
      handler(val) {
        this.dataList = []
        this.listQuery.current = 1
        this.listQuery.params.courseId = val
      }
    },
    fileId: {
      handler(val) {
        this.dataList = []
        this.listQuery.current = 1
        this.listQuery.params.fileId = val
      }
    },
    isMine: {
      handler(val) {
        this.dataList = []
        this.listQuery.current = 1
        this.listQuery.params.isMine = val
      }
    },
    listQuery: {
      handler() {
        this.fetchList()
      },
      deep: true
    },
    'listQuery.params.courseId': {
      handler() {
        this.noMore = false
        this.dataList = []
      },
      deep: true
    }
  },
  created() {
    this.listQuery.params.courseId = this.courseId
    this.listQuery.params.fileId = this.fileId
    this.listQuery.params.isMine = this.isMine
    this.fetchList()
  },
  methods: {

    showDetail(id) {
      fetchDetail(id).then(res => {
        this.detailData = res.data
        this.detailDialog = true
      })
    },

    fetchList() {
      fetchPaging(this.listQuery).then(res => {
        if (this.listQuery.current === 1) {
          this.dataList = []
        }

        const list = res.data.records
        if (list.length === 0) {
          this.noMore = true
          return
        }

        for (let i = 0; i < list.length; i++) {
          this.dataList.push(list[i])
        }

        if (list.length < 10) {
          this.noMore = true
        }

        this.moreLoading = false
      })
    },

    loadMore() {
      this.moreLoading = true
      this.listQuery.current += 1
    },

    // 打开窗口
    handleNew() {
      this.dialogVisible = true
      this.$refs.editor.setContent('')
    },

    // 提交问题
    handleSave() {
      this.postForm.courseId = this.courseId
      this.postForm.fileId = this.fileId

      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        saveData(this.postForm).then(() => {
          this.$notify({
            title: '成功',
            message: '问题提交成功！',
            type: 'success',
            duration: 2000
          })

          this.dialogVisible = false
          this.postForm.title = ''
          this.postForm.content = ''
          this.fetchList()
        })
      })
    }

  }
}
</script>

<style scoped>
.qa-box{
  display: flex; padding: 10px;
  border-top: #eee 1px solid;
  line-height: 45px;
}

.qa-box .content{
  flex-grow: 1;
  line-height: 25px;
}

.qa-box .avatar{
  width: 60px; align-content: center;
}

.qa-box .avatar img{
  width: 50px; height: 50px; border-radius: 25px;
  border:#eee 1px solid;
}

.qa-nick{
  font-weight: 700;
  font-size: 16px;
  color: #1890FF;
}

.qa-time{
  font-size: 12px; color: #888; text-align: right;
}

.qa-content{
  font-size: 14px; line-height: 25px;
}

.reply-box{
  display: flex;
  padding: 10px;
  background: #f6f6f6;
  margin-top: 20px;
  height: auto;

}

.reply-box .avatar{
  width: 50px;
}

.reply-box .content{
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  line-height: 25px;
}

.reply-content{
  font-size: 14px;
  line-height: 25px;
  width: 100%;
}
.more-box{
  border-top: #eee 1px solid;
  padding: 20px;
  text-align: center;
}

.no-more{
  color: #666;
  font-size: 14px;
}

::v-deep p{
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

</style>
